<template>
  <div style="background-color: #f1f4f9;height: 100%;width: 100%;">
    <Header title="客服中心" :is-arrow="true" back-color="#f1f4f9" />
    <div style="width: 90%;margin: 10px auto;" >
      <div class="header_card">
        <van-card
          thumb="https://z3.ax1x.com/2021/08/17/f4EVAI.png"
        >
          <template slot="title">
            <h2 style="padding: 0;">妖怪服务台</h2>
          </template>
          <template slot="desc">
            <p>若使用中遇到问题，请及时寻找小妖帮您处理~</p>
          </template>
          <template slot="thumb">
            <van-icon class="iconfont icon-laheixiaoguaishou"></van-icon>
          </template>
        </van-card>
      </div>
      <div class="use_card">
        <van-card>
          <template slot="title">
            <div style="overflow: hidden;height: 40px;line-height: 40px;">
              <h2 style="margin: 0;padding: 0;float: left">{{title}}</h2>
              <span style="margin: 0;padding: 0;float: right;font-size: 12px;word-spacing:8px; letter-spacing: 1px;">切换其他订单</span>
            </div>
          </template>
          <template slot="desc">
            <p>订单编号: {{orderInfo.orderId}}</p>
            <p>取宝时间: {{orderInfo.createTime}}</p>
            <p>结束时间: {{orderInfo.endTime}}</p>
          </template>
          <template slot="thumb" />

        </van-card>
      </div>
      <div class="server_card">
        <van-card>
          <template slot="title">
            <div style="overflow: hidden;height: 40px;line-height: 40px;">
              <h2 style="margin: 0;padding: 0;float: left">自助服务</h2>
              <span style="margin: 0;padding: 0;float: right;font-size: 12px;word-spacing:8px; letter-spacing: 1px;">我的反馈</span>
            </div>
          </template>
          <template slot="desc">
            <van-grid :column-num="2" direction="horizontal">
              <van-grid-item class="howReturn">
                <div slot="icon" style="width: 30px;">
                  <van-icon class="iconfont icon-chuizileishen" color="#32c9bc" />
                </div>
                <div slot="text" >
                  <span @click="$router.push('/return')">如何使用归还</span>
                </div>
              </van-grid-item>
              <van-grid-item class="howReturn">
                <div slot="icon" style="width: 30px;">
                  <van-icon class="iconfont icon-lou1" color="#72b8de" />
                </div>
                <div slot="text" >
                  <span @click="$router.push('/home/shop')">附近可用门店</span>
                </div>
              </van-grid-item>
              <van-grid-item class="howReturn">
                <div slot="icon" style="width: 30px;">
                  <van-icon class="iconfont icon-qianbao1" color="#745dec" />
                </div>
                <div slot="text" >
                  <span  @click="$router.push('/wallet')">押金/余额提现</span>
                </div>
              </van-grid-item>
              <van-grid-item class="howReturn">
                <div slot="icon" style="width: 30px;">
                  <van-icon class="iconfont icon-wenhao" color="#f5958b" />
                </div>
                <div slot="text"  >
                  <span @click="$router.push('/glitch')" style="padding-right: 10px;">充电宝故障</span>
                </div>
              </van-grid-item>
              <van-grid-item class="howReturn">
                <div slot="icon" style="width: 30px;">
                  <van-icon class="iconfont icon-guihuan1" color="#fb8f76" />
                </div>
                <div slot="text">
                  <span @click="$router.push('/noreturn')" style="padding-right: 30px" >无法归还</span>
                </div>
              </van-grid-item>
              <van-grid-item class="howReturn">
                <div slot="icon" style="width: 30px;">
                  <van-icon class="iconfont icon-yichang" color="#f5996e" />
                </div>
                <div slot="text" >
                  <span @click="$router.push('/costerror')" style="padding-right: 20px;">计费异常</span>
                </div>
              </van-grid-item>
            </van-grid>
          </template>
          <template slot="thumb" />
        </van-card>
      </div>
      <div class="question_card">
        <van-divider dashed :style="{ borderColor: '#1989fa', padding: '0 16px' }">常见问题</van-divider>
        <van-tabs>
          <van-tab title="使用问题">
            <van-cell-group inset >
              <van-cell title="没有取到充电宝" is-link to="Usequestion"/>
              <van-cell title="充电宝无法充电" is-link to="Usequestions"/>
            </van-cell-group>
          </van-tab>
          <van-tab title="归还问题">
            <van-cell-group inset >
              <van-cell title="归还订单没有结束" is-link to="Returnquestion"/>
              <van-cell title="无法归还" is-link to="Returnquestions"/>
            </van-cell-group>
          </van-tab>
          <van-tab title="支付问题">
            <van-cell-group inset >
              <van-cell title="订单如何支付" is-link to="Apipayquestion"/>
            </van-cell-group>
          </van-tab>
          <van-tab title="费用问题">
            <van-cell-group inset >
              <van-cell title="订单收费标准" is-link to="Costquestiono"/>
              <van-cell title="对订单费用有疑问" is-link to="Costquestiont"/>
              <van-cell title="发票相关" is-link to="Costquestions"/>
            </van-cell-group>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/basic/Header'
export default {
  name: 'Service',
  components: {
    Header
  },
  data () {
    return {
      orderInfo: {}
    }
  },
  computed: {
    title () {
      return this.orderInfo.status === 1 ? '正在使用' : '使用完成'
    }
  },
  methods: {
    getOrderByUserId () {
      this.getRequest('/fro/order/search/' + this.$store.state.user.user.id).then(({ data }) => {
        console.log(data)
        if (data.code === 200) {
          this.orderInfo = data.data
        }
      })
    }
  },
  mounted () {
    this.getOrderByUserId()
  }
}
</script>

<style lang="scss" scoped>
.header_card .van-card {
  background-color: #f1f4f9;
  .van-icon {
    height: 100%;
    width: 100%;
    font-size: 55px;
    color: #0086b3;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .van-card__thumb {
    width: 60px;
    height: 80px;
  }
}

.use_card .van-card {
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 20px;
  box-shadow: 0 0 10px 10px rgba(235, 239, 242, 1);
  p {
    margin: 5px 0 5px 0;
    color: #b2bdbf;
  }
}
.server_card .van-card {
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 20px;
  box-shadow: 0 0 10px 10px rgba(235, 239, 242, 1);
  p {
    margin: 5px 0 5px 0;
    color: #b2bdbf;
  }
}
.question_card .van-divider {
  margin-bottom: 0;
}
</style>
